import React from 'react'
import { DropdownButton, MenuItem } from 'react-bootstrap'
import weAjax from '../utils/ajax'

// import jtodt from '../utils/date.js'
// const api = 'http://bm.juzhen.net/activity/'; // Item operation
// const api2 = 'http://bm.juzhen.net/service'; // Set operation

class ActivityCreation extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange1 = this.handleChange1.bind(this);
        this.handleChange2 = this.handleChange2.bind(this);
        this.handleChange3 = this.handleChange3.bind(this);
        this.dropBtnClick = this.dropBtnClick.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.aa = 0;
        this.state = {
            name: '',
            table_name: '',
            online_time: '',
            dropbtnTitle: '',
            serviceList: [],
            curSelectService: null // 目前所选择的服务号信息
        };
    }

    componentDidMount() {
        this.ajaxid = weAjax({ url: "/service", method: 'get' }, (data) => {
            this.setState({
                serviceList: data.data,
                dropbtnTitle: data.data[0].name,
                curSelectService: data.data[0]
            })
        });
    }

    componentWillUnmount() {
        this.ajaxid.abort();
    }

    create() {
        if (this.state.curSelectService && this.state.name && this.state.table_name && this.state.online_time) {
            weAjax({ url: "/activity", method: 'post' }, {
                name: this.state.name,
                table_name: this.state.table_name,
                serviceid: this.state.curSelectService.serviceid,
                online_time: this.state.online_time
            }, (data) => {
                alert('创建成功');
                console.log(data);
            })
        } else {
            alert('请输入正确的信息')
        }

    }

    onSubmit(e) {
        e.preventDefault();
        this.create();
    }

    handleChange1(e) {
        this.setState({ name: e.target.value });
    }

    handleChange2(e) {
        this.setState({ table_name: e.target.value });
    }

    handleChange3(e) {
        this.setState({ online_time: e.target.value });
    }

    dropBtnClick(e, obj) {

        this.setState({
            dropbtnTitle: this.state.serviceList[parseInt(e, 10)].name,
            curSelectService: this.state.serviceList[parseInt(e, 10)]
        });
    }

    render() {
        const name = this.state.name;
        const table_name = this.state.table_name;

        const online_time = this.state.online_time;

        const items = this.state.serviceList.map((item, i) =>
            <MenuItem key={i} eventKey={i}>{item.name}</MenuItem>
        );
        return (
            <div>
                <div className="form-form" >
                    <div className="form-title">活动创建</div>
                    <input className="form-input" value={name} onChange={this.handleChange1} placeholder="活动名称" />
                    <input className="form-input" value={table_name} onChange={this.handleChange2} placeholder="表名" />
                    <input type='date' className="form-input" value={online_time} onChange={this.handleChange3} placeholder="上线时间" />

                    <DropdownButton bsStyle='default'
                        title={this.state.dropbtnTitle}
                        onSelect={this.dropBtnClick} id='db'>
                        {items}
                    </DropdownButton>
                    <button onClick={this.onSubmit} className='form-button'>注 册</button>
                </div>
            </div>
        );
    }
}

export default ActivityCreation;